<template>
  <div>
    <div class="class_mid">
      <van-nav-bar
      title="开始考试"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      style="width:100%"
    />
    </div>
    <div class="box two">
      <!-- 听力 -->
      <div>
        <h3 class="questiontype">{{ tingliList.bigproblemname }}</h3>
        <div>
          <span class="okscore">{{ tingliList.score }}</span>
          <div class="yinpin">
            <audio controls="controls" class="audio" :src="'http://upenglish.ayvvv.cn' + tingliList.stemcontent"></audio>
            <div v-for="(item, index) in tingliList" :key="item.id">
              <p class="tit">{{ item.question }}</p>
              <van-radio-group class="moreselect" v-model="tingliradio[index]">
                <van-radio name="A" v-if="item.aoption">{{ item.aoption }}</van-radio>
                <van-radio name="B" v-if="item.boption">{{ item.boption }}</van-radio>
                <van-radio name="C" v-if="item.coption">{{ item.coption }}</van-radio>
                <van-radio name="D" v-if="item.doption">{{ item.doption }}</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
      </div>
      <!-- 选择 -->
      <div>
        <h3 class="questiontype">{{ xuZeList.bigproblemname }}</h3>
        <div>
          <span class="okscore">{{ xuZeList.score }}</span>
          <div>
            <p  class="tit" v-html="xuZeList.stemcontent"></p>
            <div v-for="(item, index) in xuZeList" :key="item.id">
              <p>{{ item.question }}</p>
              <van-radio-group class="moreselect" v-model="xuZeradio[index]">
                <van-radio name="A" v-if="item.aoption">{{ item.aoption }}</van-radio>
                <van-radio name="B" v-if="item.boption">{{ item.boption }}</van-radio>
                <van-radio name="C" v-if="item.coption">{{ item.coption }}</van-radio>
                <van-radio name="D" v-if="item.doption">{{ item.doption }}</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
      </div>
      <!-- 判断 -->
      <div>
        <h3 class="questiontype">{{ panDuanList.bigproblemname }}</h3>
        <div>
          <span class="okscore">{{ panDuanList.score }}</span>
          <div>
            <p  class="tit" v-html="panDuanList.stemcontent"></p>
            <div v-for="(item, index) in panDuanList" :key="item.id">
              <p>{{ item.question }}</p>
              <van-radio-group class="moreselect" v-model="panDuanradio[index]">
                <van-radio name="A" v-if="item.aoption">{{ item.aoption }}</van-radio>
                <van-radio name="B" v-if="item.boption">{{ item.boption }}</van-radio>
                <van-radio name="C" v-if="item.coption">{{ item.coption }}</van-radio>
                <van-radio name="D" v-if="item.doption">{{ item.doption }}</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
      </div>
      <!-- 阅读 -->
      <div>
        <h3 class="questiontype">{{ yueDuList.bigproblemname }}</h3>
        <div>
          <span class="okscore">{{ yueDuList.score }}</span>
          <div>
            <p class="tit" v-html="yueDuList.stemcontent"></p>
            <div v-for="(item, index) in yueDuList" :key="item.id">
              <p>{{ item.question }}</p>
              <van-radio-group class="moreselect" v-model="yueDuradio[index]">
                <van-radio name="A" v-if="item.aoption">{{ item.aoption }}</van-radio>
                <van-radio name="B" v-if="item.boption">{{ item.boption }}</van-radio>
                <van-radio name="C" v-if="item.coption">{{ item.coption }}</van-radio>
                <van-radio name="D" v-if="item.doption">{{ item.doption }}</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
      </div>
      <!-- 阅读 -->
      <div>
        <h3 class="questiontype">{{ yueDuList1.bigproblemname }}</h3>
        <div>
          <span class="okscore">{{ yueDuList1.score }}</span>
          <div>
            <p class="tit" v-html="yueDuList1.stemcontent"></p>
            <div v-for="(item, index) in yueDuList1" :key="item.id">
              <p>{{ item.question }}</p>
              <van-radio-group class="moreselect" v-model="yueDuradio1[index]">
                <van-radio name="A" v-if="item.aoption">{{ item.aoption }}</van-radio>
                <van-radio name="B" v-if="item.boption">{{ item.boption }}</van-radio>
                <van-radio name="C" v-if="item.coption">{{ item.coption }}</van-radio>
                <van-radio name="D" v-if="item.doption">{{ item.doption }}</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
      </div>
      <!-- 阅读 -->
      <div>
        <h3 class="questiontype">{{ yueDuList2.bigproblemname }}</h3>
        <div>
          <span class="okscore">{{ yueDuList2.score }}</span>
          <div>
            <p class="tit" v-html="yueDuList2.stemcontent"></p>
            <div v-for="(item, index) in yueDuList2" :key="item.id">
              <p>{{ item.question }}</p>
              <van-radio-group class="moreselect" v-model="yueDuradio2[index]">
                <van-radio name="A" v-if="item.aoption">{{ item.aoption }}</van-radio>
                <van-radio name="B" v-if="item.boption">{{ item.boption }}</van-radio>
                <van-radio name="C" v-if="item.coption">{{ item.coption }}</van-radio>
                <van-radio name="D" v-if="item.doption">{{ item.doption }}</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        <van-button type="info" @click="getjiaojuan" v-if="dataisshow">确认提交</van-button>
      </div>
      <van-dialog v-model="show" title="总分" show-cancel-button @confirm="toNextpage">
        <div slot="default">
          <div class="zhong">{{ allscore }}</div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import { exemDetail, jiaojuan, addexem } from '@/api/question.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      xuZeList: [],
      panDuanList: [],
      yueDuList: [],
      tingliList: [],
      xuZeradio: [],
      panDuanradio: [],
      yueDuradio: [],
      tingliradio: [],
      arrayDataFile: [],
      shijuan: [],
      yueDuList1: [],
      yueDuList2: [],
      yueDuradio1: [],
      yueDuradio2: [],
      show: false,
      allscore: '',
      Qid: '',
      logId: '',
      dataisshow: false
    }
  },

  created () {
    this.getExemDetail()
  },
  computed: {
    ...mapState(['id'])
  },
  methods: {
    async getExemDetail () {
      this.Qid = this.$route.params.id
      const id = this.$route.params.id
      const { data } = await exemDetail({
        testpaperid: id
      })
      console.log(data)
      this.shijuan = data.testpaperresult
      this.shijuan.forEach((item) => {
        if (item.type === '1') {
          this.xuZeList = item
        } else if (item.type === '2') {
          this.panDuanList = item
        } else if (item.type === '3' && item.sort === 3) {
          this.yueDuList = item
        } else if (item.type === '4') {
          this.tingliList = item
        } else if (item.type === '3' && item.sort === 4) {
          this.yueDuList1 = item
        } else if (item.type === '3' && item.sort === 5) {
          this.yueDuList2 = item
        }
      })
      console.log(this.yueDuList2)
      if (data) {
        this.dataisshow = true
      }
    },
    async getjiaojuan () {
      const res = this.tingliradio
      const res1 = this.xuZeradio
      const res2 = this.panDuanradio
      const res3 = this.yueDuradio
      const res4 = this.yueDuradio1
      const res5 = this.yueDuradio2
      const Qid = this.$route.params.id
      function pages (res) {
        const pages = []
        res.forEach((item, index) => {
          const page = Math.floor(index / 8)
          if (!pages[page]) {
            pages[page] = []
          }
          pages[page].push(item)
        })
        return pages
      }
      pages(res1)
      pages(res2)
      pages(res3)
      pages(res4)
      pages(res5)
      const { data } = await jiaojuan({
        userid: this.id,
        testpaperid: Qid,
        answerstr: res + '|' + res1 + '|' + res2 + '|' + res3 + '|' + res4 + '|' + res5
      })
      console.log(data)
      this.allscore = data.testpaperresult.allscore
      // console.log(this.allscore)
      this.show = true
      this.$toast.success('提交成功')
      const data1 = await addexem({
        userid: this.id,
        testpaperid: Qid,
        answerstr: res + '|' + res1 + '|' + res2 + '|' + res3 + '|' + res4 + '|' + res5,
        allscore: this.allscore
      })
      console.log(data1)
      this.logId = data1.data.logId
      // console.log(res)
      this.tingliradio = []
      this.xuZeradio = []
      this.panDuanradio = []
      this.yueDuradio = []
      this.yueDuradio1 = []
      this.yueDuradio2 = []
    },
    toNextpage () {
      this.$router.push({ path: `/exemStudy/${this.logId}` })
    }
  }
}
</script>

<style scoped lang='less'>
.box {
  width: 650px;
  margin: 0 auto;
}
.yinpin {
  position: relative;
}
.questiontype{
  font-size: 16px;
  background-color: #f3f3f3;
  padding-top:10px;
  padding-left:10px;
  color:#666666;
  font-weight:normal;
  margin-top:27px
}
.okscore{
  display:block;
  font-size: 16px;
  background-color: #f3f3f3;
  padding-top:8px;
  padding-top:8px;
  padding-left:15px;
  color:#666666;
  margin-bottom:18px ;

}
.tit{
  margin-bottom:10px;
}
.moreselect  div{
  margin-bottom:10px

}
.btn{
  display:flex;
  justify-content:center;
}
.zhong {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
  font-weight: 700;
  margin: 0 auto;
}
audio  {
  width: 400px !important;
  height: 54px;
}
.audio {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 250px;
}
</style>
